import {useContext} from 'react';
import {ThemeContext} from './ThemeContextProvider';
import {StyleSheet, TouchableOpacity, View, Text} from 'react-native';
export default ({number='', setNumber, onOk}) => {
  const {theme} = useContext(ThemeContext);
  const styles = StyleSheet.create({
    root: {
      flexDirection: 'column',
    },
    commonBtn: {
      width: 90,
      height: 64,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: theme.dividerColor,
      borderRadius: 12,
    },
    commonText: {
      fontSize: 36,
      fontWeight: 'bold',
      color: theme.fontColor,
    },
    iconfont: {
      fontFamily: 'iconfont',
      fontSize: 22,
      color: theme.fontColor,
    },
    row1: {
      flexDirection: 'row',
      width: 420,
      justifyContent: 'space-between',
      marginTop: 20,
    },
    clearText: {
      fontSize: 20,
    },
    confirmBtn: {
      width: 90,
      height: 148,
      backgroundColor: theme.primaryColor,
      borderRadius: 12,
      alignItems: 'center',
      justifyContent: 'center',
    },
    confirmText: {
      fontSize: 20,
    },
    row2: {
      flexDirection: 'column',
      width: 310,
      justifyContent: 'space-between',
    },
    row3: {
      flexDirection: 'row',
      justifyContent: 'space-between',
    },
  });
  const numClick = (value) => {
    switch(value) {
        case '1': setNumber(()=>number+'1') ; break;
        case '2': setNumber(()=>number+'2') ; break;
        case '3': setNumber(()=>number+'3') ; break;
        case '4': setNumber(()=>number+'4') ; break;
        case '5': setNumber(()=>number+'5') ; break;
        case '6': setNumber(()=>number+'6') ; break;
        case '7': setNumber(()=>number+'7') ; break;
        case '8': setNumber(()=>number+'8') ; break;
        case '9': setNumber(()=>number+'9') ; break;
        case '0': setNumber(()=>number+'0') ; break;
        case '00': setNumber(()=>number+'00') ; break;
        case '.':   if(number.indexOf('.')===-1){
            setNumber(()=>number+'.')
        }
        ; break;
        case 'x': setNumber(()=>number = number.substring(0,number.length-1)); break;
        case '清空': setNumber(()=>''); break;
        case '确定': onOk(); break;
    }
  }
  return (
    <View style={styles.root}>
      <View style={styles.row1}>
        <TouchableOpacity activeOpacity={0.7} style={styles.commonBtn} onPress={()=>numClick('1')}>
          <Text style={styles.commonText}>1</Text>
        </TouchableOpacity>
        <TouchableOpacity activeOpacity={0.7} style={styles.commonBtn} onPress={()=>numClick('2')}>
          <Text style={styles.commonText}>2</Text>
        </TouchableOpacity>
        <TouchableOpacity activeOpacity={0.7} style={styles.commonBtn} onPress={()=>numClick('3')}>
          <Text style={styles.commonText}>3</Text>
        </TouchableOpacity>
        <TouchableOpacity activeOpacity={0.7} style={styles.commonBtn} onPress={()=>numClick('x')}>
          <Text style={styles.iconfont}>{'\ue6a1'}</Text>
        </TouchableOpacity>
      </View>
      <View style={styles.row1}>
        <TouchableOpacity activeOpacity={0.7} style={styles.commonBtn} onPress={()=>numClick('4')}>
          <Text style={styles.commonText}>4</Text>
        </TouchableOpacity>
        <TouchableOpacity activeOpacity={0.7} style={styles.commonBtn} onPress={()=>numClick('5')}>
          <Text style={styles.commonText}>5</Text>
        </TouchableOpacity>
        <TouchableOpacity activeOpacity={0.7} style={styles.commonBtn} onPress={()=>numClick('6')}>
          <Text style={styles.commonText}>6</Text>
        </TouchableOpacity>
        <TouchableOpacity activeOpacity={0.7} style={styles.commonBtn} onPress={()=>numClick('清空')}>
          <Text style={styles.clearText}>清空</Text>
        </TouchableOpacity>
      </View>
      <View style={styles.row1}>
        <View style={styles.row2}>
          <View style={styles.row3}>
            <TouchableOpacity activeOpacity={0.7} style={styles.commonBtn} onPress={()=>numClick('7')}>
              <Text style={styles.commonText}>7</Text>
            </TouchableOpacity>
            <TouchableOpacity activeOpacity={0.7} style={styles.commonBtn} onPress={()=>numClick('8')}>
              <Text style={styles.commonText}>8</Text>
            </TouchableOpacity>
            <TouchableOpacity activeOpacity={0.7} style={styles.commonBtn} onPress={()=>numClick('9')}>
              <Text style={styles.commonText}>9</Text>
            </TouchableOpacity>
          </View>
          <View style={styles.row3}>
            <TouchableOpacity activeOpacity={0.7} style={styles.commonBtn} onPress={()=>numClick('.')}>
              <Text style={styles.commonText}>.</Text>
            </TouchableOpacity>
            <TouchableOpacity activeOpacity={0.7} style={styles.commonBtn} onPress={()=>numClick('0')}>
              <Text style={styles.commonText}>0</Text>
            </TouchableOpacity>
            <TouchableOpacity activeOpacity={0.7} style={styles.commonBtn} onPress={()=>numClick('00')}>
              <Text style={styles.commonText}>00</Text>
            </TouchableOpacity>
          </View>
        </View>
        <View>
          <TouchableOpacity activeOpacity={0.7} style={styles.confirmBtn} onPress={()=>numClick('确定')}>
            <Text style={styles.confirmText}>确定</Text>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );
};
